/*
 * Created: 2022-09-12 16:51:13
 * Author : 涛涛涛
 */

import React, { FC, useEffect, useRef, useState, CSSProperties, useContext } from 'react';
import { View, Text, Input, CommonEventFunction, InputProps } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { HomeSearchContext } from '@/pages/HomeSearch/HomeSearchContext';
export interface IProps extends ICompProps {
    onClear?: () => void;
}
SearchInput.defaultProps = {} as Partial<IProps>;
function SearchInput(props: IProps) {
    const { className, style, onClear } = props;
    const localClassName = useClassName('SearchInput', className);
    const inputRef = useRef<HTMLInputElement>(undefined);
    const { searchReducer, searchDispatch, fetchProductList } = useContext(HomeSearchContext);
    /** 处理输入的关键字变化 */
    const handleInputChange: CommonEventFunction<InputProps.inputEventDetail> = (event) => {
        const val = event.detail.value;
        searchDispatch({
            type: 'setKeywords',
            payload: val,
        });
    };
    /** 处理点击搜索功能 */
    const handleSearch = (keywords: string) => {
        searchDispatch({
            type: 'saveHistoryRecord',
            payload: keywords,
        });
        fetchProductList(searchReducer.keywords);
    };
    return (
        <RootView className={localClassName} style={style}>
            <View className="input-section">
                <Input
                    className="input"
                    ref={inputRef}
                    value={searchReducer.keywords}
                    placeholder="模糊搜索作品名/作者名"
                    focus={true}
                    confirmType="search"
                    onInput={handleInputChange}
                />
                {searchReducer.keywords && (
                    <View className="clear">
                        <Text className="iconfont" onClick={onClear}>
                            &#xe613;
                        </Text>
                    </View>
                )}
            </View>
            <View className="search">
                <Text className="iconfont" onClick={() => handleSearch(searchReducer.keywords)}>
                    &#xe62b;
                </Text>
            </View>
        </RootView>
    );
}
export default React.memo(SearchInput as FC<IProps>);
const RootView = styled(View)`
    &.SearchInput {
        display: flex;
        align-items: center;
        height: 100%;
        .input-section {
            flex-grow: 1;
        }
        .search {
            flex-shrink: 0;
        }
    }
    &.SearchInput .input-section {
        position: relative;
        margin-left: 30px;
        padding-right: 50px;
        display: flex;
        align-items: center;
        .input {
            width: 100%;
            color: #333;
            font-size: 28px;
        }
        .clear {
            margin: -10px;
            position: absolute;
            right: 10px;
            top: calc(50% + 10px);
            transform: translateY(calc(-50%));
            color: #000;
            > .iconfont {
                padding: 10px;
                font-size: 28px;
                line-height: 28px;
            }
        }
    }
    &.SearchInput .search {
        margin: -20px;
        margin-left: 20px;
        position: relative;
        top: 1px;
        > .iconfont {
            margin-right: 160px;
            padding: 20px;
            font-size: 40px;
            line-height: 40px;
        }
    }
`;
